<script lang="ts">
import { createVNode } from 'vue';
import router from '@/router';
import { ElButton } from 'element-plus';

function Empty() {
    const Icon = h('div', { class: 'm-not-found__icon' }, []);

    const Title = h('h4', { class: 'm-not-found__title' }, '抱歉！您访问的网页不存在');
    const SubTitle = h(
        'h4',
        { class: 'm-not-found__sub-title' },
        'I’M SORRY！THE WEBPAGE YOU VISITED DOES NOT EXIST'
    );
    const btn = h(
        'div',
        null,
        createVNode(
            ElButton,
            {
                size: 'large',
                type: 'primary',
                class: 'button',
                onClick: () => router.push('/')
            },
            {
                default: () => '返回主页'
            }
        )
    );
    return h(
        'div',
        {
            class: ['m-not-found']
        },
        [Icon, Title, SubTitle, btn]
    );
}

export default {
    setup() {
        return () => Empty();
    }
};
</script>

<style lang="scss">
@include b(m-not-found) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - 170px);

    @include e(title) {
        margin: 30px auto 24px;
        font-size: 18px;
        line-height: 18px;
        color: var(--q-text-color-secondary);
    }

    @include e(sub-title) {
        margin: 0 auto 30px;
        font-size: 14px;
        line-height: 14px;
        color: var(--q-color-info-light-8);
    }

    @include e(icon) {
        @include flex;

        width: 171px;
        height: 156px;
        margin: 0 auto;
        background: url('./img/not-found.svg') center no-repeat;
        background-size: 100%;
    }

    .button {
        margin-left: 50%;
        transform: translateX(-50%);
    }

    h4 {
        font-weight: 400;
        text-align: center;
    }
}
</style>
